@use "../../assets/scss/mixins/base" as mx;
@use "../../assets/scss/mixins/size" as sz;
@use "../../assets/scss/mixins/waveunderline" as wave;
@use "../../assets/scss/mixins/noise" as noise;
@use "../../assets/scss/mixins/figure/graph" as graph;

html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: #ffd866;
}

.container {
  margin: auto;
  width: 18rem;
  height: 12.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .frame {
    position: absolute;
    div {
      position: absolute;
      background: #e24624;
    }
    .one {
      top: 6.3rem;
      left: 2.45rem;
      @include mx.wh(6.25rem, 0.5rem);
      transform: rotate(-50deg);
    }
    .two {
      top: 8.7rem;
      left: 3.3rem;
      @include mx.rect(6rem, 0.5rem, null, 1rem 0 0 1rem);
    }
    .three {
      top: 5.5rem;
      left: 4.25rem;
      @include mx.rect(7.5rem, 0.5rem, null, 1rem);
      transform: rotate(72deg);
    }
    .four {
      top: 4rem;
      left: 7.5rem;
      @include mx.wh(5.5rem, 0.5rem);
    }
    .five {
      top: 6.5rem;
      left: 8rem;
      @include mx.wh(6rem, 0.5rem);
      transform: rotate(-50deg);
    }
    .six {
      top: 4.7rem;
      left: 8.8rem;
      @include mx.wh(8.8rem, 0.5rem);
      border-radius: 1rem;
      transform: rotate(72deg);
    }
    .seat {
      top: 1.5rem;
      left: 5.25rem;
      @include mx.wh(3rem, 1.25rem);
      background: #25262a;
      border-radius: 50% 100% 100% 50% / 50% 60% 100% 100%;
    }
    .pedal {
      top: 8.4rem;
      left: 8.6rem;
      @include mx.wh(1rem, 1rem);
      background: transparent;
      border: 0.5rem solid #a59c85;
      border-radius: 50%;
      animation: wheelSpin 2s linear infinite;
      @include mx.pseudo-ba();
      &::before {
        top: -0.15rem;
        left: -0.25rem;
        @include mx.wh(0.5rem, 1.23rem);
        background-color: #fff;
        border-radius: 1rem 1rem 0 0;
      }
      &::after {
        top: 0.75rem;
        left: -0.5rem;
        @include mx.wh(1rem, 0.5rem);
        background-color: #25262a;
        border-radius: 1rem;
        animation: pedalSpin 2s linear infinite;
      }
    }
    .handle {
      top: 0.5rem;
      left: 11.7rem;
      @include mx.wh(1.5rem, 0.5rem);
      border-radius: 1rem;
      transform: rotate(-25deg);
      &::before {
        position: absolute;
        content: "";
        top: -0.35rem;
        left: 0.2rem;
        width: inherit;
        height: inherit;
        background-color: #25262a;
        border-radius: inherit;
        transform: rotate(45deg);
      }
    }
  }
  .wheel {
    position: absolute;
    z-index: -1;
    .left,
    .right {
      position: absolute;
      z-index: -1;
      top: 5.5rem;
      @include mx.rect(7rem, 7rem, null, 50%);
      border: 0.5rem solid #25262a;
      box-shadow: inset 0 0 0 0.5rem #fff;
    }
    .left {
      &::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 2.5rem;
        left: 2.5rem;
        @include mx.rect(1rem, 1rem, transparent, 50%);
        border: 0.5rem solid #a59c85;
      }
      &::before {
        position: absolute;
        content: "";
        @include mx.rect(8.5rem, 8.5rem, null, 50%);
        border: 0.35rem solid #e24624;
        top: -1.3rem;
        left: -1.3rem;
        clip-path: polygon(30% 0, 100% 0, 100% 50%, 30% 50%);
      }
    }
    .right {
      left: 11rem;
      &::after {
        position: absolute;
        content: "";
        z-index: 1;
        top: 2.5rem;
        left: 2.5rem;
        @include mx.rect(1rem, 1rem, transparent, 50%);
        border: 0.5rem solid #a59c85;
      }
      &::before {
        position: absolute;
        content: "";
        width: 1.3rem;
        height: 0.37rem;
        background: #e24624;
        left: -11rem;
        top: -0.95em;
      }
    }
    .spokes {
      position: absolute;
      top: 0.25rem;
      left: 2.85rem;
      @include mx.wh(0.3rem, 5.5rem);
      animation: wheelSpin 2.5s linear infinite;
      .spoke {
        position: absolute;
        top: 0;
        width: inherit;
        height: inherit;
        background-color: #fff;

        @for $i from 1 through 6 {
          &:nth-of-type(#{$i}) {
            transform: rotate(calc(30deg * #{$i}));
          }
        }
      }
    }
  }
}
.test {
  margin-top: -150px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  @include graph.taichi(500px, red, blue);
  strong {
    @include noise.hotPixel_text(40px);
    // @include wave.waveUnderLine;
  }
}

@keyframes wheelSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes pedalSpin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

// .test {
//   background: red;
//   @include sz.dimension(12, 25, "%");
//   @debug unit(100px);
// }
